<template>
  <h1>我是用户首页</h1>
  <button @click="adduser">添加用户</button>
  <div class="pug-dialog-box" v-show="showAdd">
    <Add></Add>
  </div>
  <div class="pug-dialog-box-overlay" @click="this.showAdd=false" v-show="showAdd">
  </div>
</template>

<script>
import Add from './add'
export default {
  name: "index.vue",
  components:{
    Add
  },
  data() {
    return {
      showAdd:false
    }
  },
  setup() {
    //vue也没有，但是数据初始化之后
  },
  created() {
    //vue创建完毕，数据初始化之后，页面还未渲染开始---不能dom操作
    //this ---当前Vue-User
  },
  mounted() {
  //操作dom
    },
  methods: {
    adduser(){
      this.showAdd = true
    },

  },
  beforeRouteEnter(to,from,next){
    // 在渲染该组件的路由被确认之前调用,不能通过this访问组件实列，因为在守卫执行前，组件实列还没有被创建。
    console.log(to,from)
    console.log("111")
    next();
  },

  beforeRouteUpdate(to,from){
    // 在渲染该组件的路由改变，但是在该组件被复用时调用
    // 比如：对一个带参数的路由：/user/:id 在/user/1和/user/2之间跳转时这个方法会被触发，如果是相同的访问不会被触发。
    // 可以访问组件实列this
    console.log(to,from)
    console.log("2222")
  },

  beforeRouteLeave(to,from){
    // 导航即将离开组件的路由时调用。
    // 可以访问组件实列this
    console.log(to,from)
    console.log("33333")
    var con = confirm("你还有数据没有保存成功！你真的要离开吗？")
    if(!con){
      return false;
    }
  }

}
</script>

<style scoped>
.pug-dialog-box{
  position: fixed;
  right: 0;
  top:0;
  bottom: 0;
  width: 50%;
  z-index: 100;
  background: yellow;
}

.pug-dialog-box-overlay{
  position: fixed;
  right: 0;
  top:0;
  bottom: 0;
  left:0;
  z-index: 99;
  background: rgba(0,0,0,0.5);
}
</style>
